<template>
	<view>
		<l-painter
			ref="painter"
		  :board="poster"
		  isCanvasToTempFilePath
		  @success="painterSucc"
		  custom-style="position: fixed; left: 200%"
		/>
		
		<!-- <u-popup :show="showPop" mode="center" @close="cancelCanvas" :round="20" :safeAreaInsetBottom="false"> -->
			<uni-popup ref="canverShare" type="center" background-color="#fff">
				<view style="overflow: hidden;width: 600rpx;">
					<image :src="canvasImg" mode="widthFix" style="border-radius: 20rpx;overflow: hidden;width: 600rpx;"
						@longpress="saveImage()"></image>
					<view style="font-size: 28rpx;color: #333;text-align: center;line-height: 20rpx;height: 50rpx;">
						快长按保存图片分享给朋友吧</view>
				</view>
			</uni-popup>
		<!-- </u-popup> -->
	</view>
</template>

<script>
	export default {
		name: 'cm-painter',
		props: {
			ewmImg: {
				type: String,
				default: ''
			},
			avator: {
				type: String,
				default: ''
			},
			userName: {
				type: String,
				default: ''
			}
		},
		data() {
		    return {
				// showPop: false,
				canvasImg: '', // 生成的图片
		        path: '',
		        poster: {
		            css: {
		                width: "750rpx",
		                paddingBottom: "10rpx",
		                background: "#fff"
		            },
		            views: [
		                {
		                    src: this.avator,
		                    type: "image",
		                    css: {
		                        background: "#fff",
		                        objectFit: "cover",
		                        marginLeft: "40rpx",
		                        marginTop: "40rpx",
		                        width: "100rpx",
		                        boxSizing: "border-box",
		                        height: "100rpx",
		                        borderRadius: "50%"
		                    }
		                },
		                {
		                    type: "view",
		                    css: {
		                        marginTop: "50rpx",
		                        paddingLeft: "20rpx",
		                        display: "inline-block"
		                    },
		                    views: [
		                        {
		                            text: this.userName,
		                            type: "text",
		                            css: {
		                                display: "block",
		                                paddingBottom: "10rpx",
		                                color: "#E74D45",
		                                fontSize: "32rpx",
		                                fontWeight: "bold"
		                            }
		                        },
		                        {
		                            text: "邀请您一起来提升学历",
		                            type: "text",
		                            css: {
		                                color: "rgba(0,0,0,.7)",
		                                fontSize: "24rpx"
		                            },
		                        }
		                    ],
		                },
		                {
		                    css: {
		                        marginLeft: "40rpx",
		                        marginTop: "30rpx",
		                        boxSizing: "border-box",
		                        borderRadius: "16rpx",
		                        width: "670rpx",
								overflow: 'hidden',
		                        boxShadow: "0 20rpx 58rpx rgba(0,0,0,.15)"
		                    },
		                    views: [
		                        {
		                            src: "https://program.qdlearn.cn/ma/images/original.png",
		                            type: "image",
		                            css: {
		                                objectFit: "cover",
		                                objectPosition: "50% 50%",
		                                width: "670rpx",
		                                height: "860rpx"
		                            },
		                        }
							],
		                    type: "view"
		                },
						
						{
							css: {
								marginTop: "32rpx",
								fontSize: "26rpx",
								color: "#8c5400",
								padding: "0 32rpx 32rpx"
							},
							views:[
								{
								    src: "https://program.qdlearn.cn/ma/images/bird.png",
								    type: "image",
								    css: {
								        objectFit: "cover",
								        objectPosition: "50% 50%",
								        width: "90rpx",
								        height: "90rpx",
										borderRadius: "50%"
								    },
								},
								{
									text: "起点教育",
									type: "text",
									css: {
										marginLeft: "16rpx",
										marginTop: '10rpx',
										color: "#000",
										fontSize: '32rpx',
										fontWeight: '700',
									},
								},
								{
									text: "超过20万同学在起点学习",
									type: "text",
									css: {
										marginLeft: "-130rpx",
										marginTop: '54rpx',
										color: "#333",
										fontSize: '24rpx'
									},
								},
								{
								    src: this.ewmImg,
								    type: "image",
								    css: {
								        objectFit: "cover",
								        objectPosition: "50% 50%",
								        width: "100rpx",
								        height: "100rpx",
										borderRadius: "50%",
										marginLeft: "200rpx"
								    },
								},
							],
							type: 'view'
						},
						
						
		            ]
		        }
		    }
		},
		methods: {
			painterSucc($event) {
				this.$refs.canverShare.open()
				this.canvasImg = $event
				this.$emit("painterSucc",$event)
			},
			saveImage() {
				// 生成图片
				this.$refs.painter.canvasToTempFilePathSync({
				  fileType: "jpg",
				  // 如果返回的是base64是无法使用 saveImageToPhotosAlbum，需要设置 pathType为url
				  pathType: 'url',
				  quality: 1,
				  success: (res) => {
					  uni.getSetting({
					  	success(res) {
					  		// 如果没有则获取授权
					  		if (!res.authSetting['scope.writePhotosAlbum']) {
					  			uni.authorize({
									scope: 'scope.writePhotosAlbum',
									success() {
										uni.saveImageToPhotosAlbum({
										    filePath: res.tempFilePath,
										    success: function () {
										        uni.showToast({
													title: '保存成功'
												})
										    }
										});
									},
									fail() {
										uni.showModal({
											title: '提示：',
											content: "授权失败，请前往设置中心设置权限",
											confirmText: '前往授权',
											success: function() {
												uni.openSetting({
													success(res) {
														// res.authSetting = {
														//   "scope.userInfo": true,
														//   "scope.userLocation": true
														// }
													}
												})
											}
										})
									}
								})
							} else {
								uni.saveImageToPhotosAlbum({
								    filePath: res.tempFilePath,
								    success () {
								        uni.showToast({
											title: '保存成功'
										})
								    }
								});
							}
						}
					  })
					  
				    console.log(res.tempFilePath);
				    // 非H5 保存到相册
				    uni.saveImageToPhotosAlbum({
				        filePath: res.tempFilePath,
				        success: function () {
				            uni.showToast({
								title: '保存成功'
							})
				        }
				    });
				  },
				});
				// this.$emit("saveImage")
			},
			cancelCanvas() {
				this.$emit("cancelCanvas")
			}
			 // path = 
		}
	}
</script>

<style lang="scss">

</style>
